<template>
    <div>
        <div class="common-header-wrap">
            <mt-header class="common-header" title="义卖中心">
                <mt-button icon="back" slot="left" @click="$router.go(-1)"></mt-button>
            </mt-header>
        </div>
        <index-banner v-if="banners && banners.length > 0" :items="banners"></index-banner>
        <index-product-list
                :items="goodProducts"
                title="义卖商品"
                :type="popular"
                head="true"
                v-if="goodProducts && goodProducts.length > 0"
        ></index-product-list>
        <div class="sale-article-list">
            <img src="../../../assets/image/tea/1.jpg">
            <div>福鼎市质检局宣传茶叶质量，安全服务茶产业发展</div>
        </div>
        <div class="sale-article-list">
            <img src="../../../assets/image/tea/2.jpg">
            <div>福鼎市质量计量检测所对秋茶茶青样品抽样检测</div>
        </div>
        <div class="sale-article-list">
            <img src="../../../assets/image/tea/3.jpg">
            <div>福鼎点头：中秋佳节未到 白茶月饼已抢“鲜”上市</div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import IndexBanner from '../index/IndexBanner'
    import IndexProductList from '../index/IndexProductList'
    export default {
        name: 'Charitysale',
        data() {
            return {
                popular: ''
            }
        },
        computed: {
            ...mapState({
                banners: state => state.home.banners,
                goodProducts: state => state.home.goodProducts
            })
        },
        components: {
            IndexBanner,
            IndexProductList
        },
        methods: {

        }
    }
</script>

<style scoped lang='scss'>
.sale-article-list{
    display: flex;
    flex-direction: row;
    background: white;
    margin-top: 10px;
    padding:3vw;
    img{
        width: 28vw;
        height: 21vw;
        margin-right: 3vw;
    }
    div{
        width: 60vw;
        text-align: justify;
        font-size: .7rem;
    }
}
</style>
